<template>
  <view class="order-result">
    <up-toast ref="uToast" />
    <image class="bg-logo" src="@/static/image/logo_bg.png" />
    <view class="topbar" :style="topbarStyle">
      <view class="topbar-returnBtn" @click="handleReturnPage">
        <up-icon name="arrow-left" color="white" size="24"></up-icon>
        <text class="topbar-returnBtn-text">返回</text>
      </view>
      <view class="topbar-title">订单详情</view>
    </view>
    <view class="main" :style="mainStyle">
		<view class="main-result">
			<view class="main-result-title">
				<up-icon name="checkmark-circle" color=":#f8f8f8" size="28" />
				<text class="main-result-title-text">{{ statusText }}</text>
        <text class="main-result-title-text">{{ orderData.price }}元</text>
			</view>
			<text class="main-result-desc" v-if="orderData.status === 1">消费时请向商家出示一下券码</text>
      <view class="main-result-mockFinishBtn" v-if="orderData.status === 1" @click.stop="handleMockFinish">模拟核销</view>
		</view>
		<view class="main-item qrcode" v-if="orderData.status === 1">
			<text class="qrcode-title">订单验证码</text>
      <text class="qrcode-code">{{ orderData.code }}</text>
			<image class="qrcode-image" :src="orderData.qrCodeUrl">
        <image class="qrcode-image-logo" src="@/static/image/logo_qrcode.png" />
      </image>
      <text class="qrcode-licensePlate">{{ orderData.licensePlate }}</text>
		</view>
    <view class="main-item">
      <view class="main-item-title"><text class="main-item-title-important">站点</text>信息</view>
      <view class="main-item-btn">
        <view class="main-item-btn-item" @click.stop="handlePhoneCall">
          <up-icon name="phone" size="18" color="#fff"></up-icon>
        </view>
        <view class="main-item-btn-item" @click.stop="handleDetail">
          <up-icon name="map" size="18" color="#fff"></up-icon>
        </view>
      </view>
      <view class="main-item-desc import-desc"><text class="main-item-desc-title">站点名称</text>{{ orderData.checkStation }}</view>
      <view class="main-item-desc import-desc"><text class="main-item-desc-title">检测类型</text>{{ orderData.orderType }}</view>
			<view class="main-item-desc import-desc"><text class="main-item-desc-title">检测时间</text>{{ orderData.checkTime }}</view>
      <view class="main-item-desc import-desc" style="padding-right: 160rpx;" @click.stop="handleDetail">
        <text class="main-item-desc-title">详细地址</text>
        {{ orderData.checkStationLocation }}
        <up-icon name="arrow-right" color="#333333" size="14" />
      </view>
		</view>
    <view class="main-item">
			<view class="main-item-title"><text class="main-item-title-important">基本</text>信息</view>
			<view class="main-item-desc import-desc"><text class="main-item-desc-title">联系人</text>{{ orderData.userName }}</view>
			<view class="main-item-desc"><text class="main-item-desc-title">联系方式</text>{{ orderData.userPhone }}</view>
			<view class="main-item-desc"><text class="main-item-desc-title">备注</text>{{ orderData.desc }}</view>
		</view>
    <view class="main-item">
			<view class="main-item-title"><text class="main-item-title-important">订单</text>信息</view>
			<view class="main-item-desc"><text class="main-item-desc-title">订单编号</text>{{ orderData.id }}</view>
			<view class="main-item-desc"><text class="main-item-desc-title">订单价格</text>{{ orderData.price }}元</view>
			<view class="main-item-desc"><text class="main-item-desc-title">创建时间</text>{{ orderData.createTime }}</view>
			<view class="main-item-desc" v-if="orderData.status !== 0 && orderData.status !== 3"><text class="main-item-desc-title">支付时间</text>{{ orderData.payTime }}</view>
			<view class="main-item-desc" v-if="orderData.status !== 0 && orderData.status !== 3"><text class="main-item-desc-title">支付方式</text>{{ orderData.payType }}</view>
			<view class="main-item-desc" v-if="orderData.status === 2"><text class="main-item-desc-title">核销时间</text>{{ orderData.finishTime }}</view>
			<view class="main-item-desc" v-if="orderData.status === 3 || orderData.status === 4"><text class="main-item-desc-title">取消时间</text>{{ orderData.cancelTime }}</view>
			<view class="main-item-desc" v-if="orderData.status === 4"><text class="main-item-desc-title">退款时间</text>{{ orderData.refundTime }}</view>
		</view>
    <view class="main-item" v-if="orderData.status === 0 || orderData.status === 1">
			<view class="main-item-title"><text class="main-item-title-important">退改</text>规则</view>
			<view class="main-item-desc"><text class="main-item-desc-tag">随时退</text>未使用可随时申请全额退款。</view>
			<view class="main-item-desc"><text class="main-item-desc-tag">过期退</text>使用时间后1天经核实未使用系统将自动发起退款申请。</view>
		</view>
    </view>
    <!-- 0只显示取消，1显示两个按钮， 23不显示 -->
    <view class="bottom-bar" v-if="orderData.status === 0 || orderData.status === 1 || orderData.status === 2">
      <view class="bottom-bar-sub" v-if="orderData.status !== 2">
        <button class="bottom-bar-sub-btn delete" @click="handleCancel">{{ orderData.status === 0 ? '取消' : '取消订单' }}</button>
        <button class="bottom-bar-sub-btn" v-if="orderData.status === 0" @click="handleEdit">修改</button>
      </view>
      <button class="bottom-bar-btn" v-if="orderData.status === 0" @click="handlePay">立即付款</button>
      <button class="bottom-bar-btn" v-if="orderData.status === 1" @click="handleEdit">修改订单</button>
      <!-- <button class="bottom-bar-btn" v-if="orderData.status === 2" @click="handleEdit">添加评价</button> -->
    </view>
    <!-- 确认取消东单弹窗 -->
    <up-modal
			ref="uModal"
      :show="isShowConfirmModel"
      @confirm="handleConfirm"
      @cancel="handleClose"
      @close="handleClose"
			title="是否确认取消订单?"
			confirmColor="#125796"
			showCancelButton
			asyncClose
      closeOnClickOverlay />
  </view>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import useMapUtils from '@/utils/map.js';
  import API from '@/api';
  import useCommonUtils from '@/utils/common'

  const { formatDate } = useCommonUtils();
  onLoad(async options => {
	// options.orderId = 'D1111'
  if(options.orderId) getOrderDetail(options.orderId)
	else uni.navigateBack()
  });

  const isShowConfirmModel = ref(false)
  const orderData = reactive({})
  const statusText = computed(() => {
	  switch(orderData.status) {
		  case 0: return '待付款';
		  case 1: return '待使用';
		  case 2: return '已完成';
		  case 3: return '已取消';
		  case 4: return '已退款';
		  default: return '';
	  }
  })

  const { globalData } = getApp();
  const { openLocation } = useMapUtils();
  const topbarStyle = `height: ${globalData.navBarHeight}px; margin-top: ${globalData.statusBarHeight}px`;
  const mainStyle = computed(() => `margin-top: ${globalData.navBarHeight + globalData.statusBarHeight + 12}px;
                     margin-bottom: ${(orderData.status === 2 || orderData.status === 3) ? '0' : 'calc(46px + 20px + 12px)'}`);

  const handleMockFinish = async () => {
    orderData.status = 2;
    orderData.finishTime = formatDate(new Date(), 'datetime')
    const res = await API.order.update(orderData);
    uni.$u.toast('核销成功');
    getOrderDetail(res.data.id)
  }

  const handleEdit = () => {
    uni.redirectTo({
      url: `/pages/addOrder/addOrder?orderId=${orderData.id}`
    })
  };

  const handlePay = async () => {
    orderData.status = 1
    orderData.payTime = formatDate(new Date(), 'datetime')
    const res = await API.order.update(orderData)
    uni.$u.toast('支付成功');
    getOrderDetail(res.data.id)
  }

  const handleCancel = () => {
    isShowConfirmModel.value = true;
  };

  const handleConfirm = async () => {
    //待付款0、待使用1、已完成2、已取消3、已退款4
    orderData.cancelTime = formatDate(new Date(), 'datetime')
    if (orderData.status === 0) orderData.status = 3;
    if (orderData.status === 1) {
      orderData.status = 4;
      orderData.refundTime = formatDate(new Date(), 'datetime')
    }
    
    await API.order.update(orderData);
    uni.$u.toast('预约已取消');
		// uni.navigateTo({
		//   url: `/pages/mine/pages/order/orderResult?orderId=${res.data.id}`
		// });
		handleClose()
	}
	
	const handleClose = () => {
		isShowConfirmModel.value = false
	}

  const handlePhoneCall = () => {
    if (!orderData.tel) {
      getApp().globalData.toast.error(uToastRef.value, '该门店暂无联系方式');
      return;
    }
    uni.makePhoneCall({
      phoneNumber: orderData.tel
    });
  };

  const handleDetail = () => {
    openLocation({
      name: orderData.checkStation,
      address: orderData.checkStationLocation,
      latitude: orderData.latitude,
      longitude: orderData.longitude
    });
  };

  const handleReturnPage = () => {
    uni.navigateBack();
  };
  
  const getOrderDetail = async orderId => {
	  // const mockData = {
		//   checkStation: "中渝检测", //1
    //   checkStationLocation: '重庆市渝中区', //1
		//   checkTime: "2024-06-06", //1
		//   desc: "车辆贴了膜",
		//   id: "D1717659794981", //1
		//   licensePlate: "渝ARG681",
		//   orderType: "燃油车检测",
		//   userName: "张三",
		//   userPhone: "123",
    //   price: '240',
    //   createTime: "2024-06-06",
    //   payType: '微信支付',
		//   status: 1, //待付款0、待使用1、已完成2、已退款3、已取消4
    //   code: '9903 3499 4986 30',
		//   qrCodeUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.ZDgcgVP7i2iZlJERZwyeuQHaHa?w=212&h=212&c=7&r=0&o=5&pid=1.7'
	  // }
    const res = await API.order.detail(orderId)
	  Object.assign(orderData, res.data)
  }
</script>

<style lang="scss" scoped>
  .order-result {
    height: 100vh;
    overflow: auto;
    position: relative;
    background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 520rpx);

    .bg-logo {
      position: fixed;
      top: -3%;
      width: 680rpx;
      height: 600rpx;
      right: 0;
      pointer-events: none;
    }

    .topbar {
      color: white;
      z-index: 1;
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      padding: 0 12px;
      @include flex-row(flex-start, center);

      &-returnBtn {
        @include flex-row(flex-start, center);

        &-text {
          margin-left: 4px;
          font-size: 14px;
        }
      }

      &-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .main {
      // margin-bottom: calc(46px + 20px + 12px);
	  
      &-result {
        padding: 0 12px;
        color: $uni-bg-color-grey;
        &-title {
          display: flex;
          &-text {
            font-size: 24px;
            font-weight: bold;
            margin-left: 8px;
          }
        }
        &-desc {
          margin-top: 12px;
          font-size: 13px;
        }
        &-mockFinishBtn {
          margin-top: 12px;
          @include size(80px, 28px);
          @include flex-row(center, center);
          border-radius: 40px;
					font-size: 14px;
					color: #fff;
          background: linear-gradient(to right, #1e7eba, #0558a8);
        }
      }


	  
      &-item {
        position: relative;
        @include card;
        padding: 12px;
      
        &-title {
          font-size: 15px;
          display: flex;
          align-items: center;
          height: 20px;
          font-weight: bold;
          color: $uni-text-color;
          margin-bottom: 12px;
      
          &-important {
            color: $uni-color-primary;
          }
      
          &::before {
            content: '';
            margin-right: 6px;
            width: 4px;
            height: 100%;
            border-radius: 2px;
            background: $uni-color-gradient-blue;
          }
        }

        &-btn {
          position: absolute;
          right: 12px;
          bottom: 12px;
          display: flex;

          &-item {
            @include size(36px);
            @include flex-row(center, center);
            border-radius: 50%;
            background: linear-gradient(to right, #1e7eba, #0558a8);
          }

          &-item:last-of-type {
            margin-left: 12px;
          }
        }

        &-desc {
          padding: 6px 0;
          font-size: 14px;
          color: $uni-text-color;
          @include flex-row(flex-start, center);

          &-title {
            width: 68px;
            font-size: 14px;
            color: $uni-text-color-deep-grey;
            margin-right: 24px;
            font-weight: normal;
          }

          &-tag {
            font-weight: normal;
            max-width: 50px;
            min-width: 50px;
            box-sizing: border-box;
            text-align: center;
            padding: 2px 6px;
            border-radius: 8px;
            border: 1px solid $uni-color-primary;
            color: $uni-color-primary;
            font-size: 12px;
            margin-right: 34px;
          }
        }

        .import-desc {
          font-weight: bold;
        }
      }

      .qrcode {
        color: $uni-text-color;
        @include flex-column(space-between, center);

        &-title {
          font-size: 15px;
          font-weight: bold;
        }

        &-code {
          font-size: 18px;
          font-weight: bold;
          margin:  6px 0;
        }

        &-image {
          position: relative;
          @include size(300rpx);

          &-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            @include size(90rpx);
          }
        }

        &-licensePlate {
          font-size: 22px;
          font-weight: bold;
        }
      }
    }

    .bottom-bar {
      z-index: 9;
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: $uni-bg-color-grey;
      padding: 12px;
      padding-bottom: 18px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-sub {
        flex: 1;
        @include flex-row(space-between, center);

        &-btn {
          flex: 1;
          margin-right: 12px;
          height: 45px;
          line-height: 45px;
          border-radius: 12px;
          box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.02);
          text-align: center;
          color: #1e7eba;
          font-weight: lighter;
          letter-spacing: 2px;
          font-weight: 400;
          font-size: 16px;
          border: 1px solid #1e7eba;
        }

        // .delete {
        //   color: $uni-color-error;
        //   border: 1px solid $uni-color-error;
        // }
      }

      &-btn {
        flex: 1;
        height: 45px;
        line-height: 45px;
        border-radius: 12px;
        font-size: 16px;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.02);
        text-align: center;
        color: white;
        font-weight: lighter;
        letter-spacing: 2px;
        background: linear-gradient(145deg, #1e7eba, #0558a8);
      }
    }
  }
</style>
